<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <base href="" />
    <title>eTaxware : <?php echo $data['site_name']; ?></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="assets/css/bootstrap.css" type="text/css" charset="utf-8">
	<script src="assets/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="assets/js/bootstrap.js"></script> 
		
		
<script type="text/javascript">

var row_i = 0 ;
var menu = [{id:"1",name :"Nasi Goreng",qty : "2",price :"30000.00",sc :"2.00%",tx :"10.00%",dis : "0.00%",v_sc : "",v_tx :"",v_dis :""},
		{id:"2",name :"Ikan Gurame",qty : "2",price :"100000.00",sc :"2.00%",tx :"10.00%",dis : "0.50%",v_sc : "",v_tx :"",v_dis :""},
		{id:"3",name :"Es Kelapa",qty : "4",price :"12500.00",sc :"2.00%",tx :"10.00%",dis : "0.00%",v_sc : "",v_tx :"",v_dis :""}
		];
		

/* Define Custom Array Objects for a bill */
var BillArray = function() { };
BillArray.prototype = 	{ 	
							'data' : [],
							'total': {
								'T_pr'      : "0.00",
								'T_cv'		: "0.00",
								'T_tv'      : "0.00",
								'T_dv'		: "0.00"
							}
						};

  
BillArray.prototype.data.push = function() {
    alert('push now!');
    for(var i = 0; i < arguments.length; i++ ) {
        Array.prototype.push.call(this, arguments[i]);
    }
};	  
	  


function addquote(s){
 return "'"+s+"'";
}



$(document).ready(function(){
 /*add row */
$('button[id^="btn_addrow-"]').click(function(){
 /* find data on array by id */
 
 var btn_id = $(this).attr('id');
 var id     = btn_id.split("-");
 var obj_s  = objectFindByKey(menu,'id',id[1]);
 
 var bill_data = new BillArray;
 bill_data.data.push({
	id		: obj_s.id,
	name	: obj_s.name, 
	qty		: obj_s.qty,
	price	: obj_s.price,
	sc		: obj_s.sc,
	tx		: obj_s.tx,
	dis		: obj_s.dis,
	v_sc	: obj_s.v_sc,
	v_tx	: obj_s.v_tx,
	v_dis	: obj_s.dis
	});
	
 	row_i += 1; 
	var newTr=$('<tr id="row_'+row_i+'"></tr>');
		row 	= '<td  style="width: 10%;">';
		row		+= '<button id="del-'+row_i+'" value="val-'+row_i+'"><i class="glyphicon glyphicon-remove-circle"></i></button>';
		row		+= '</td>';
		row		+= '<td style="width: 50%;">'+obj_s.name+' (@'+obj_s.price+')</td>';
		row		+= '<td style="width: 20%;"><span id="qty">'+obj_s.qty+'</span></td>';
		
		row		+= '<td style="width: 20%;">'+parseFloat(obj_s.price)*parseInt(obj_s.qty)+'</td>';
	
		newTr.html(row);
		newTr.appendTo("#saletbl"); 
	 
  });
  
  /*del row */
  
  $("#saletbl").on("click",'button[id^="del-"]',function(){
	/* row_c += 1; 
	var newTr=$('<tr id="row_'+row_c+'"></tr>');
		row 	= '<td  style="width: 10%;">';
		row		+= '<button id="del-'+row_c+'" value="val-'+row_c+'"><i class="glyphicon glyphicon-remove-circle"></i></button>';
		row		+= '</td>';
		row		+= '<td style="width: 50%;">'+row_c+'</td>';
		row		+= '<td style="width: 20%;">'+row_c+'</td>';
		row		+= '<td style="width: 20%;">'+row_c+'</td>';
		
		
		newTr.html(row);
		newTr.appendTo("#saletbl");  */
	var delID=$(this).attr('id');
	var dl_id=delID.split("-");
	//alert('delID : '+dl_id[1]+', #row_'+dl_id[1]);
	
	row_id=$("#row_"+dl_id[1]);
	row_id.remove();
	 
  });
  
  
});


function objectFindByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return array[i];
        }
    }
    return null;
}

/* var array = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
var result_obj = objectFindByKey(array, 'id', '45'); */


/* Create Class Wrapping Array Handler */
function EventedArray(handler) {
   this.stack = [];
   this.mutationHandler = handler || function() {};
   this.setHandler = function(f) {
      this.mutationHandler = f;
   };
   this.callHandler = function() { 
      if(typeof this.mutationHandler === 'function') {
         this.mutationHandler();
      }
   };
   this.push = function(obj) {
      this.stack.push(obj);
      this.callHandler();
   };
   this.pop = function() {
      this.callHandler();
      return this.stack.pop();
   };
   this.getArray = function() {
      return this.stack;
   }
}

function push_me(){
	arr.push("a","b","c","d");
}
function pop_me(){
	arr.push("a","b","c","d");
}

</script>
</head>
<body>
<p>
<button type="button" id="btn_addrow-1">Testing : Product 1</button>
<button type="button" id="btn_addrow-2">Testing : Product 2</button>
<button type="button" id="btn_addrow-3">Testing : Product 3</button>

<button type="button" id="" onClick="push_me();">Push 1</button>
<button type="button" id="" onClick="">Push 2</button>
<button type="button" id="" onClick="">Push 2</button>


		<table width="100%" border="1" cellpadding="0" cellspacing="0"  style="margin:5px 0 0 0;">
			<thead>
			<tr >
				<th style="width: 10%" >X</th>
				<th style="width: 50%">Product</th>		
				<th style="width: 20%">Qty</th>
				<th style="width: 20%">Price</th>
				
			</tr>
			</thead>	
        </table>


		<table width="100%" border="1" cellpadding="0" cellspacing="0"  id="saletbl" style="margin:0;">
		<tbody>
		</tbody>
		</table>
		
		<p><p><p>
		<!-- Panel TOTAL -->
		<table width="100%" border="2" cellpadding="0" cellspacing="0"  id="saletbl" style="margin:0;">
		<tbody>
		<tr><td style="width: 25%">Total Items</td><td id="t_item" style="width: 25%">0.00</td><td style="width: 25%">Total</td><td id="t_price" style="width: 25%">0.00</td>
		</tr>	
		<tr><td style="width: 25%">Tax</td><td id="t_tax" style="width: 25%">0.00</td><td style="width: 25%">S-Charge</td><td id="t_scharge" style="width: 25%">0.00</td>
		</tr>
		<tr><td style="width: 25%"></td><td style="width: 25%"></td><td style="width: 25%">Disc</td><td id="t_disc" style="width: 25%">0.00</td>
		</tr>
		<tr><td style="width: 25%"></td><td style="width: 25%"></td><td style="width: 25%">GRAND TOTAL</td><td id="g_total" style="width: 25%"></td>
		</tr>
		</tbody>
		</table>


</body>
</html>